<template>
    <div class="flex-v-center" v-if="enabled">
        <el-checkbox v-model="model" v-if="updatable"/>
        <div class="text-secondary pb-1 ms-2" v-if="showIfUpdatable || model">
            <span>[</span>
            <span style="margin-left: 2px;">]</span>
        </div>
    </div>
    <span v-else><!-- 避免在表格中显示true/false --></span>
</template>

<script>
export default {
    name: 'ArrayedSelect',
    emits: ['update:modelValue'],
    props: {
        modelValue: Boolean,
        property: {
            type: Object,
            required: true,
        },
        showIfUpdatable: Boolean, // 可修改时是否始终显示[]
    },
    data() {
        return {
            model: this.modelValue,
        };
    },
    computed: {
        updatable() {
            return !this.property.parentPropertyName;
        },
        enabled() {
            if (this.property.primary || (this.property.refKind && !this.property.refKind.supports('arrayed'))) {
                return false;
            }
            return this.model || this.updatable;
        },
    },
    watch: {
        modelValue() {
            this.model = this.modelValue;
        },
        model() {
            this.$emit('update:modelValue', this.model);
        },
    },
    methods: {}
}
</script>

<style lang="scss">

</style>
